<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商家管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/css/bus-style.css" media="all">
    <style>
        thead tr th{text-align: center!important;font-weight: bold!important;}
        tr td{text-align: center!important;}
        .input-this{
            background-color: #E1FFFF!important;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <blockquote class="layui-elem-quote">
                    商品第一次纳入到仓储管理时，需选择对应规格和仓库进行新增；<br>
                    如已进行过新增操作，后续可直接对每一行数据进行操作。
                </blockquote>
                <div class="layui-card-body">
                    <table lay-filter="parse-table-demo">
                        <thead>
                        <tr>
                            <th lay-data="{field:'id', width:80,sort:true}">ID</th>
                            <th lay-data="{field:'wid', minWidth:100,sort:true}">仓库</th>
                            <th lay-data="{field:'proCode', minWidth:80}">商品编码</th>
                            <th lay-data="{field:'skuId', minWidth:80}" lay-filter="stock">商品规格</th>
                            <th lay-data="{field:'qty', minWidth: 80,sort:true,edit: 'text',style:'color:red'}" lay-filter="cost">数量</th>
                        </tr>
                        </thead>
                        <tbody>
                        <c:forEach items="${proList}" var="p">
                            <tr>
                                <td>${p.id}</td>
                                <td>${p.warehouseName}</td>
                                <td>${p.proCode}</td>
                                <td>${p.specName}</td>
                                <td>${p.qty}</td>
                            </tr>
                        </c:forEach>
                        </tbody>
                    </table>
                </div>
                <div class="layui-card-body"><hr class="layui-bg-blue"></div>
                <div class="layui-card-body" style="width: 50%;margin-left: 20%">
                    <form class="layui-form" id="warehouseProductForm">
                        <input type="hidden" name="proCode" value="${proCode}">
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="red">*&nbsp;</span>选择仓库</label>
                            <div class="layui-input-block">
                                <select name="wid">
                                    <option value="">请选择</option>
                                    <c:forEach items="${warehouseList}" var="w">
                                        <option value="${w.id}">${w.name}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="red">*&nbsp;</span>选择规格</label>
                            <div class="layui-input-block">
                                <select name="skuId">
                                    <option value="">请选择</option>
                                    <c:forEach items="${skuList}" var="s">
                                        <option value="${s.id}">${s.specName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label"><span class="red">*&nbsp;</span>输入数量</label>
                            <div class="layui-input-block">
                                <input type="text" class="layui-input" placeholder="请输入数量" name="qty">
                            </div>
                        </div>
                    </form>
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <button class="layui-btn layui-btn-warm" style="margin-left: 40%" onclick="saveProductWarehouse()">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/layuiadmin/layui/layui.js"></script>
<script src="/js/jquery/jquery.min.js"></script>
<script src="/js/jquery.form.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table'], function(){
        var table = layui.table;
        var $ = layui.$, active = {
            parseTable: function(){
                //转化静态表格
                table.init('parse-table-demo', {
                });
            }
        };
        table.on('edit(parse-table-demo)', function(obj){
            //得到修改后的值
            var value = obj.value,oriData = obj.data;
            //得到字段
            var key = obj.field;
            var param = {"id":oriData.id};
            param[key] = value;
            $.ajax({
                url: "/product/editWarehouse",
                data: param,
                dataType: "json",
                type: "post",
                success: function (data) {
                    if(data.status){
                        layer.msg("更新成功",{icon:1});
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000)
                    }else{
                        layer.msg("更新失败，" + data.desc,{icon:2});
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000)
                    }
                }
            });
        });
        var type = "parseTable";
        active[type] && active[type].call(this);
    });

    function saveProductWarehouse(){
        $("#warehouseProductForm").ajaxSubmit({
            type: 'post',
            url: "/product/editWarehouse",
            data: $("#warehouseProductForm").serialize(),
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    layer.msg(data.desc, {icon: 1});
                    setTimeout(function () {
                        window.location.reload();
                    }, 1000)
                } else {
                    layer.msg(data.desc, {icon: 2});
                }
            },
            error: function () {
                layer.msg("请检查页面信息是否正确", {icon: 2});
            }
        });
    }
</script>
</body>
</html>